import React from 'react';
import {Container, List, NavBar, View, Badge} from 'amazeui-touch';
import {Link} from 'react-router';
import {hashHistory} from 'react-router'

export default class Person extends React.Component {
    static defaultProps = {
        transition: 'rfr'
    };

    handleSubmit(e) {
        e.preventDefault();
        hashHistory.push('/login');
    }

    handleChange(e) {
        e.preventDefault();
        localStorage.removeItem("userName");
        hashHistory.push('/login');
    }

    renderItems() {
        const pages = ['我的订单'];
        return pages.map((item, index) => {
            return (
                <List.Item
                    media={<img width="22" src="http://s.amazeui.org/media/i/demos/bing-1.jpg"/>}
                    linkComponent={Link}
                    linkProps={{to: {pathname: `/Order`}}}
                    title={item}
                    key={index}
                />
            );
        });
    }

    render() {
        if (localStorage.getItem("userName") === null) {
            return (
                <View>
                    <NavBar
                        amStyle="primary"
                        title="我的"
                    />
                    <div className="cartFont" onClick={this.handleSubmit.bind(this)}>未登录，点击登陆</div>
                </View>
            );
        }
        else {
            var menus = {
                rightNav: [{
                    icon: 'more'
                }]
            };
            return (
                <View>
                    <NavBar
                        {...menus}
                        amStyle="primary"
                        title="我的"
                    />
                    <Container scrollable>
                        <div>
                            <div className="person">
                            </div>
                            <div className="userName">{localStorage.getItem("userName")}</div>
                            <div onClick={this.handleChange.bind(this)}>切换账号</div>
                            <div className="personContent">
                                <List>
                                    {this.renderItems()}
                                </List>
                            </div>
                        </div>
                    </Container>
                </View>
            );
        }
    }
}
